<template>
    <div class="fail-dialog">
        <el-dialog
            title="提示"
            :visible.sync="showType"
            :close-on-click-modal="false"
            width="490px"
        >
            <div class="tips-dialog-body">
                <div
                    class="error-tips"
                >
                    <img src="../../../../../assets/images/statistics/error.png" alt="">
                </div>
                <div class="info">
                    <p>上传失败</p>
                    <ul>
                        <li v-for="(item, index) in list" :key="index">
                            <p>
                                错误提示{{ index + 1 }}：{{ item.errorInfo }}
                            </p>
                            <p class="order-num">
                                出错序号：{{ item.errorLine.join('、') }}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    class="btn-hover"
                    size="small"
                    @click="sure"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showType: false,
            list: ''
        };
    },

    methods: {
        init(data) {
            this.list = data || [];
            this.showType = true;
        },

        sure() {
            this.showType = false;
            // this.$emit('sure');
        },
    }
}
</script>

<style lang="scss" scoped>
.fail-dialog {
    .tips-dialog-body {
        padding: 24px 0 0 0;

        .error-tips {
            text-align: center;
            img {
                height: 50px;
            }
        }

        .info {
            margin-top: 16px;
            text-align: center;
            color: #727272;
            font-weight: 400;
            font-size: 16px;
            ul {
                margin-top: 36px;
                padding: 0 30px;
                text-align: left;
                max-height: 110px;
                overflow: auto;
                &::-webkit-scrollbar{
                    width: 6px;
                    height: 4px;
                    background-color: rgba(0,0,0,0.03);
                }
                &::-webkit-scrollbar-thumb {
                    background:rgba(220, 221, 221, 1);
                }

                .order-num {
                    margin-top: 6px;
                    color: #385899;
                    line-height: 1.5;
                    word-break: break-all;
                }

                li~li {
                    margin-top: 20px;
                }
            }
        }
    }

    .dialog-footer {
        text-align: center;
        padding-top: 8px;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }
}
</style>

